<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<HTML xmlns="http://www.w3.org/1999/xhtml" ><HEAD><TITLE>云和租房 - 首页</TITLE>
    <META content="text/html; charset=utf-8" http-equiv=Content-Type>
    <LINK rel=stylesheet type=text/css href="../css/style.css">
    <META name=GENERATOR content="MSHTML 8.00.7601.17514">
    <script type="text/javascript" src="../scripts/jquery-1.8.3.js"></script>
    <script>
        /*每页显示记录数(将页码的全部信息提成全局变量便于全局方法调用)*/
        var pageSize="3";
        /*当前页*/
        var pageNum="1";
        /*总页数*/
        var totalPages="0";

        $(function(){
            queryHouse();
            queryTypes();
            queryDistrict();
            /*首页查询*/
            $("#firstPage").click(function () {
                pageNum="1";
                queryHouse();
            });
            /*上页查询*/
            $("#prePage").click(function () {
                if(pageNum>1){
                    pageNum--;
                    queryHouse();
                }
            });
            /*下页查询*/
            $("#nextPage").click(function () {
                if(pageNum<totalPages){
                    pageNum++;
                    queryHouse();
                }
            });
            /*尾页查询*/
            $("#lastPage").click(function () {
                pageNum=totalPages;
                queryHouse();
            });
        });
        /*查看房屋*/
        function queryHouse() {
            $("#mes").html("");
            var lowPrice=$("#pri").val().split("-")[0];
            var highPrice=$("#pri").val().split("-")[1];
            var lowFloorage=$("#area").val().split("-")[0];
            var highFloorage=$("#area").val().split("-")[1];
            if($("#pri").val()==""){
                lowPrice="-1";
                highPrice="-1";
            }
            if($("#area").val()==""){
                lowFloorage="-1";
                highFloorage="-1";
            }
            $.get("house_queryHouse",{
                titleLike:$("#tit").val(),
                lowPrice:lowPrice,highPrice:highPrice,
                did:$("#district").val(),
                sid:$("#street").val(),tid:$("#types").val(),
                lowFloorage:lowFloorage,highFloorage:highFloorage,
                pageSize:pageSize,pageNum:pageNum
            },addBox);
        }
        function addBox(msg){
            // msg是housepage的json格式，mg就是housepage
            var mg = eval("("+msg+")");
            /*从后台获取当前页*/
            pageNum=mg.currPage;
            /*从后台获取总页数*/
            totalPages=mg.totalPage;
            //res就是房屋信息的集合
            var res=mg.result;
            $("#mes").html("");
            $.each(res,function(index,h){
                $("#mes").append("<TR>"+
                +"<TD class='house-thumb'><span><A href='details.htm' target='_blank'><img src='../images/thumb_house.gif' width='100' height='75'></a></span></TD>"
                +"<TD><DL><DT><A href='details.htm' target='_blank'>"+h.title+"</A></DL></DT></TD>"
                +"<TD>"+h.street.district.dname+h.street.sname+","+h.floorage+"平米<BR>联系方式："+h.contact+"</DD></DL></TD>"
                +"<TD class=house-type>"+h.types.tname+"</TD>"
                +"<TD class=house-price><SPAN>"+h.price+"</SPAN>元/月</TD>"
                +"</TR>");
            });
            /*将房屋信息显示完后，显示总页数和当前页码*/
            $("#cp").html("");
            $("#cp").html(""+pageNum+"/"+totalPages+"");
        }
        /*查看房屋类型*/
        function queryTypes(){
            $.get("types_queryTypes",addTypes);
        }
        function addTypes(result) {
            var res = eval("("+result+")");
            $.each(res,function (index,t) {
                $("#types").append("<OPTION value="+t.tid+">"+t.tname+"</OPTION>");
            });
        }
        /*显示房屋所在的区县*/
        function queryDistrict() {
            $.get("district_queryDistrict",addDistrict);
        }
        function addDistrict(result) {
            var res = eval(result);
            $.each(res,function (index,d) {
                $("#district").append("<OPTION value="+d.did+">"+d.dname+"</OPTION>");
            });
        }
        function change(se) {
            $("#street").html("<OPTION selected value=''>不限</OPTION>");
            if($(se).val()==""){
                return ;
            }
            queryStreet();
        }
        /*显示房屋所在的街道*/
        function queryStreet(){
            $.get("street_queryStreet",{did:$("#district").val()},addStreet);
        }
        function addStreet(result) {
            var res = eval(result);
            $.each(res,function (index,s) {
                $("#street").append("<OPTION value="+s.sid+">"+s.sname+"</OPTION>");
            });
        }
    </script>
</HEAD>
<BODY>
<DIV id=header class=wrap>
    <DIV id=logo><IMG src="../images/logo.gif"></DIV></DIV>
<DIV id=navbar class=wrap>
    <DL class="search clearfix">
        <FORM id=sform method=post action=search.action>
            <DT>
               <UL>
                 <LI class=bold>房屋信息</LI>
                 <LI>标题：
                    <INPUT id=tit class=text type=text name=title> <LABEL class=ui-blue><INPUT onclick=queryHouse() value=搜索房屋 type=button name=search></LABEL>
                 </LI>
               </UL>
            </DT>
            <DD>
                <UL>
                    <LI class=first>价格 </LI>
                    <LI>
                        <SELECT id=pri name=price>
                            <OPTION selected value="">不限</OPTION>
                            <OPTION value="0-500" >500元以下</OPTION>
                            <OPTION value="500-1000">500元—1000元</OPTION>
                            <OPTION value="1000-2000">1000元-2000元</OPTION>
                        </SELECT>
                    </LI>
                </UL>
            </DD>
            <DD>
                <UL>
                    <LI class=first>房屋位置</LI>
                    <LI>
                        <SELECT id=district onchange="change(this)">
                            <OPTION selected value="0">不限</OPTION>
                        </SELECT>
                    </LI>
                </UL>
            </DD>
            <DD style="margin-left: -33px">
                <UL>
                    <LI class=first>&nbsp;</LI>
                    <LI>
                        <SELECT id=street >
                            <OPTION selected value="0">不限</OPTION>
                        </SELECT>
                    </LI>
                </UL>
            </DD>
            <DD>
                <UL>
                    <LI class=first>房型</LI>
                    <LI>
                        <SELECT id="types" >
                            <OPTION selected value="0">不限</OPTION>
                        </SELECT>
                    </LI>
                </UL>
            </DD>
            <DD>
                <UL>
                    <LI class=first>面积 </LI>
                    <LI>
                        <SELECT id=area name=floorage>
                            <OPTION selected value="">不限</OPTION>
                            <OPTION value="0-50">50以下</OPTION>
                            <OPTION value="50-100">50-100</OPTION>
                            <OPTION value="100-200">100-200</OPTION>
                        </SELECT>
                    </LI>
                </UL>
            </DD>
        </FORM>
    </DL>
</DIV>

<DIV class="main wrap">
    <TABLE class=house-list>
        <tbody id="mes">
        <%--需要展示的房屋信息--%>
        </tbody>
    </TABLE>
    <DIV class=pager>
        <UL>
            <LI class=current><A id="firstPage" href="javascript:$(this).click()">首页</A></LI>
            <LI><A id="prePage" href="javascript:$(this).click()">上一页</A></LI>
            <LI><A id="nextPage" href="javascript:$(this).click()">下一页</A></LI>
            <LI><A id="lastPage" href="javascript:$(this).click()">末页</A></LI>
        </UL>
        <SPAN id="cp" class=total></SPAN>
    </DIV>
</DIV>
<DIV id=footer class=wrap>
    <DL>
        <DT>云和租房 © 2010 云和 京ICP证1000001号</DT>
        <DD>关于我们 · 联系方式 · 意见反馈 · 帮助中心</DD>
    </DL>
</DIV>
</BODY>
</HTML>
